import React, { Component } from 'react';
import {Switch, Route,Link} from 'react-router-dom';
import {Layout,Menu,Icon} from 'antd';
import CalculationBinomial from './recursion/CalculationBinomial';
import FractalTree from './recursion/FractalTree';
import TwentyFour from './loop/TwentyFour';
import StrongLine from './loop/StrongLine';
import GeneContrast from './dynamic/GeneContrast';
import Yacht from './dynamic/Yacht';
import BranchBound from './branch/BranchBound';
import MapOverlay from './additional/MapOverlay';
import './App.css';
const { Header, Content, Footer } = Layout;
const SubMenu = Menu.SubMenu;

class App extends Component {
  render() {
    return (
      <Layout id="main" >
        <Header>
          <div className="logo" />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['0']} style={{ lineHeight: '64px' }} >
            <SubMenu title={<span><Icon type="plus-circle-o" />递归算法</span>}>
              <Menu.Item key="1"><Link to={`/recursion/1`}>二项式计算</Link></Menu.Item>
              <Menu.Item key="2"><Link to={`/recursion/2`}>分形树</Link></Menu.Item>
            </SubMenu>
            <SubMenu title={<span><Icon type="plus-circle-o" />遍历算法</span>}>
              <Menu.Item key="3"><Link to={`/loop/1`}>强联通分量</Link></Menu.Item>
              <Menu.Item key="4"><Link to={`/loop/2`}>24点</Link></Menu.Item>
            </SubMenu>
            <SubMenu title={<span><Icon type="plus-circle-o" />动态规划</span>}>
              <Menu.Item key="5"><Link to={`/dynamic/2`}>最少租金</Link></Menu.Item>
              <Menu.Item key="6"><Link to={`/dynamic/4`}>基因序列对比</Link></Menu.Item>
            </SubMenu>
            <SubMenu title={<span><Icon type="plus-circle-o" />分支限界</span>}>
              <Menu.Item key="7"><Link to={`/branch/2`}>机器调度</Link></Menu.Item>
            </SubMenu>
            <SubMenu title={<span><Icon type="plus-circle-o" />附加题目</span>}>
              <Menu.Item key="8"><Link to={`/additional/1`}>地图着色</Link></Menu.Item>
            </SubMenu>
          </Menu>
        </Header>
        <Content style={{ padding: '50px 50px 0 50px' }}>
          <Switch>
            <Route path="/recursion/1"
                  render={(props) => <CalculationBinomial popKey={this.selectKeys} {...props}/>}/>
            <Route path="/recursion/2"
                  render={(props) => <FractalTree popKey={this.selectKeys} {...props}/>}/>
            <Route path="/loop/2"
                  render={(props) => <TwentyFour popKey={this.selectKeys} {...props}/>}/>  
            <Route path="/loop/1"
                  render={(props) => <StrongLine popKey={this.selectKeys} {...props}/>}/> 
            <Route path="/dynamic/4"
                  render={(props) => <GeneContrast popKey={this.selectKeys} {...props}/>}/> 
            <Route path="/dynamic/2"
                  render={(props) => <Yacht popKey={this.selectKeys} {...props}/>}/> 
            <Route path="/branch/2"
                  render={(props) => <BranchBound popKey={this.selectKeys} {...props}/>}/>   
            <Route path="/additional"
                  render={(props) => <MapOverlay popKey={this.selectKeys} {...props}/>}/>  
            <Route path="/"
                  render={(props) => <CalculationBinomial popKey={this.selectKeys} {...props}/>}/>
          </Switch>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          算法课程设计
        </Footer>
      </Layout>
    );
  }
}

export default App;
